import React, { Component } from 'react';
import { TabBar } from 'antd-mobile'
import { AppOutline, AppstoreOutline, UnorderedListOutline, ShopbagOutline, UserOutline } from 'antd-mobile-icons';
import { withRouter } from 'react-router-dom'
import "../styles/FooterBox.scss"

// @withRouter
class FooterBox extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tabs: [
                {
                    key: '/home/HomePage',
                    title: '店铺',
                    icon: <AppOutline />
                },
                {
                    key: '/home/ClassifyPage',
                    title: '分类',
                    icon: <AppstoreOutline />
                },
                {
                    key: '/home/AllCommodities',
                    title: '所有商品',
                    icon: <UnorderedListOutline />
                },
                {
                    key: '/home/ShoppingCart',
                    title: '购物车',
                    icon: <ShopbagOutline />
                },
                {
                    key: '/home/MyPage',
                    title: '我的',
                    icon: <UserOutline />
                },
            ],
            activeKey: '/home/HomePage',
        }
    }
    handleChange(key) {
        this.props.history.push(key);
        this.setState({ activeKey: key });
    }
    render() {
        return (
            <div className='FooterBox'>
                {/* 底部 */}
                <TabBar activeKey={this.state.activeKey} onChange={(key) => { this.handleChange(key) }}>
                    {
                        this.state.tabs.map(item => (
                            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                        ))
                    }
                </TabBar>
            </div>
        );
    }
}

export default withRouter(FooterBox);